"use strict";

const path = require("path");
const buildConf = require("./build.config");
const packageConf = require("./package.json");

function resolve(dir) {
  return path.join(__dirname, dir);
}
const IS_PROD = ["production", "prod", "test"].includes(process.env.NODE_ENV);

module.exports = {
  // 基础配置 详情看文档
  publicPath: process.env.VUE_APP_BASE_URL,
  // outputDir: 'dist',
  // assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === "development",
  productionSourceMap: false,
  devServer: {
    port: 8080,
    open: true,
    overlay: {
      warnings: false,
      errors: true,
    },
    compress: true,
    disableHostCheck: true,
    proxy: {
      // 把key的路径代理到target位置
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        //需要代理的路径   例如 '/api'
        target: process.env.VUE_APP_BASE_TARGET, //代理到 uat
        // target: "https://48m5b97551.vicp.fun/"
        changeOrigin: true,
        // logLevel: 'debug',
        pathRewrite: {
          // 修改路径数据
          ["^" + process.env.VUE_APP_BASE_API]: process.env.VUE_APP_BASE_API, // 举例 '^/api:""' 把路径中的/api字符串删除
        },
        headers: {
          //header设置
          referer: process.env.VUE_APP_BASE_TARGET, //referer
          origin: process.env.VUE_APP_BASE_TARGET,
        },
      },
    },
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/style/common.scss";
          @import "@/style/public.scss";
      `,
      },
    },
  },
  // configureWebpack: (config) => {
  //   config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
  // },
  configureWebpack: {
    output: {
      // 输出重构  打包编译后的 文件名称  【模块名称.版本号.js】
      filename: `js/[name][hash].${packageConf.version}.js`,
      chunkFilename: `js/[name][hash].${packageConf.version}.js`,
    },
    //    @路径走src文件夹
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
  },
  chainWebpack(config) {
    // set preserveWhitespace
    // 移除 preload 插件
    config.plugins.delete("preload");
    // 移除 prefetch 插件
    config.plugins.delete("prefetch");

    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap((options) => {
        options.compilerOptions.preserveWhitespace = true;
        return options;
      })
      .end();
    config
      // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === "development", (config) =>
        config.devtool("cheap-source-map")
      );

    // 忽略解析markdown文件
    config.module.noParse(/\.md$/);
    if (IS_PROD) {
      config.module
        .rule("md")
        .test(/\.md$/)
        .use("url-loader")
        .loader("url-loader")
        .options({
          limit: 100,
          esModule: false,
          generator: () => "",
        });
    }

    config.when(process.env.NODE_ENV !== "development", (config) => {
      // 不打包 begin
      // 1.目前已经测试通过[vue,axios,echarts]可以cdn引用，其它组件测试通过后可继续添加
      // 2.此处添加不打包后，需在public/index.html head中添加相应cdn资源链接
      config.set(
        "externals",
        buildConf.cdns.reduce((p, a) => {
          p[a.name] = a.scope;
          return p;
        }, {})
      );
      // 不打包 end

      config.plugin("html").tap((args) => {
        if (buildConf.title) {
          args[0].title = buildConf.title;
        }
        if (buildConf.cdns.length > 0) {
          args[0].cdns = buildConf.cdns.map((conf) => {
            if (conf.path) {
              conf.js = `${buildConf.baseCdnUrl}${conf.path}`;
            } else {
              conf.js = `${buildConf.baseCdnUrl}/${
                conf.name
              }/${packageConf.dependencies[conf.name].replace("^", "")}/${
                conf.name
              }.min.js`;
            }

            return conf;
          });
        }
        return args;
      });
      config
        .plugin("ScriptExtHtmlWebpackPlugin")
        .after("html")
        .use("script-ext-html-webpack-plugin", [
          {
            // `runtime` must same as runtimeChunk name. default is `runtime`
            inline: /single\..*\.js$/,
          },
        ])
        .end();
      config.optimization.splitChunks({
        chunks: "all",
        cacheGroups: {
          libs: {
            name: "chunk-libs",
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: "initial", // only package third parties that are initially dependent
          },
          elementUI: {
            name: "chunk-elementUI", // split elementUI into a single package
            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
          },
          commons: {
            name: "chunk-commons",
            test: resolve("src/components"), // can customize your rules
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true,
          },
        },
      });
      config.optimization.runtimeChunk("single");
    });

    // svg rule loader
    config.module.rule("svg").exclude.add(resolve("src/assets/icons")).end();

    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/assets/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      });
  },
};
